<template>
  <view class="coupon-center">
    <!-- 优惠券列表 -->
    <scroll-view class="coupon-list" scroll-y>
      <view 
        class="coupon-item" 
        v-for="(item, index) in couponList" 
        :key="index"
      >
        <view class="coupon-left">
          <text class="amount">{{item.amount}}元</text>
          <text class="condition">满{{item.condition}}元可用</text>
        </view>
        <view class="coupon-right">
          <text class="name">{{item.name}}</text>
          <text class="time">{{item.startTime}}至{{item.endTime}}</text>
          <text class="desc">{{item.description}}</text>
          <view 
            class="get-btn" 
            @click="getCoupon(item)"
            :class="{disabled: item.isReceived}"
          >
            <text>{{item.isReceived ? '已领取' : '立即领取'}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponList: [
        {
          id: 1,
          name: '新用户专享',
          amount: 20,
          condition: 100,
          startTime: '2023-06-01',
          endTime: '2023-06-30',
          description: '限新用户首次使用',
          isReceived: false
        },
        {
          id: 2,
          name: '618大促',
          amount: 50,
          condition: 300,
          startTime: '2023-06-10',
          endTime: '2023-06-20',
          description: '618活动期间可用',
          isReceived: false
        },
        {
          id: 3,
          name: '会员专享',
          amount: 30,
          condition: 200,
          startTime: '2023-06-01',
          endTime: '2023-06-30',
          description: '仅限VIP会员使用',
          isReceived: true
        },
        {
          id: 4,
          name: '生日礼券',
          amount: 80,
          condition: 500,
          startTime: '2023-06-01',
          endTime: '2023-06-30',
          description: '生日当月可用',
          isReceived: false
        }
      ]
    }
  },
  methods: {
    getCoupon(item) {
      if (item.isReceived) return
      
      uni.showLoading({
        title: '领取中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        item.isReceived = true
        uni.showToast({
          title: '领取成功',
          icon: 'success'
        })
      }, 1000)
    }
  }
}
</script>

<style>
.coupon-center {
  height: 100vh;
  background-color: #f7f7f7;
}
.coupon-list {
  height: 100%;
  padding: 20rpx;
}
.coupon-item {
  display: flex;
  height: 200rpx;
  margin-bottom: 20rpx;
  background: linear-gradient(to right, #ff2d4a, #ff6b6b);
  border-radius: 10rpx;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.coupon-item:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20rpx;
  background-image: radial-gradient(circle at 0 10rpx, transparent 10rpx, #ff2d4a 10rpx);
  background-size: 20rpx 20rpx;
  background-repeat: repeat-y;
}
.coupon-left {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 1px dashed rgba(255,255,255,0.5);
}
.amount {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.condition {
  font-size: 24rpx;
}
.coupon-right {
  flex: 1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.time {
  font-size: 24rpx;
  margin-bottom: 10rpx;
}
.desc {
  font-size: 24rpx;
  color: rgba(255,255,255,0.8);
  margin-bottom: 10rpx;
}
.get-btn {
  align-self: flex-end;
  padding: 6rpx 30rpx;
  background-color: #fff;
  color: #ff2d4a;
  font-size: 24rpx;
  border-radius: 30rpx;
}
.get-btn.disabled {
  background-color: rgba(255,255,255,0.3);
  color: #fff;
}
</style>